Speed up your coding in Visual Studio Code: Custom shortcuts and snippets

Visual Studio Code में अपनी कोडिंग को तेज़ करें: कस्टम शॉर्टकट और स्निपेट

क्या आप Visual Studio Code (VS Code) का उपयोग करते हुए अपनी कोडिंग की गति बढ़ाना चाहते हैं? क्या आप बार-बार टाइप किए जाने वाले कोड के हिस्सों को लिखने में लगने वाले समय को कम करना चाहते हैं? यदि हाँ, तो यह ब्लॉग पोस्ट आपके लिए है! VS Code हमें अपनी कोडिंग प्रक्रिया को अनुकूलित करने के लिए दो शक्तिशाली सुविधाएँ प्रदान करता है: कस्टम कीबोर्ड शॉर्टकट और स्निपेट्स।

इनके माध्यम से, आप अपने वर्कफ़्लो को सुव्यवस्थित कर सकते हैं और अधिक कुशल कोडर बन सकते हैं। आइए जानें कि इन्हें कैसे सेट करें।

1. Visual Studio Code में कस्टम कीबोर्ड शॉर्टकट कैसे बनाएँ? ⌨️

Visual Studio Code के भीतर, हम अपने स्वयं के शॉर्टकट बना सकते हैं। अपने स्वयं के शॉर्टकट बनाने के लिए, हमें Preferences के भीतर जाना होगा, जो Settings का एक हिस्सा है। आप इसे File मेनू के भीतर भी पा सकते हैं।

Preferences के भीतर जाने के बाद, आप Keyboard Shortcuts को खोज सकते हैं। एक बार जब आप इसे खोज लेते हैं, तो आप जिस प्रोग्रामिंग भाषा के लिए शॉर्टकट बनाना चाहते हैं, उसे चुनना होगा। उदाहरण के लिए, यदि आप JavaScript के लिए एक शॉर्टकट बनाना चाहते हैं, तो "JavaScript" खोजें।

Visual Studio Code का उपयोग विभिन्न प्रकार की प्रोग्रामिंग भाषाओं के लिए किया जाता है, इसलिए आपको पहले VS Code को बताना होगा कि आप किस भाषा के लिए शॉर्टकट बनाना चाहते हैं। एक बार जब आप JavaScript का चयन कर लेते हैं, तो आप उससे संबंधित शॉर्टकट बना सकते हैं। आप बनाए गए शॉर्टकट को बदल भी सकते हैं।

2. Visual Studio Code में अपने स्निपेट्स कैसे बनाएँ? 📝

Visual Studio Code के भीतर, कीबोर्ड शॉर्टकट के अलावा, आप अपने स्वयं के स्निपेट्स भी तैयार कर सकते हैं।

स्निपेट्स से अभिप्राय: VS Code एडिटर के भीतर संक्षिप्त कोड लिखकर Tab दबाने के बाद वह कोड एक्सपैंड (Expand) कर जाता है। इसे ही स्निपेट कहते हैं।

उदाहरण के लिए: JavaScript की कोडिंग के भीतर console.log लिखने के लिए आप एक छोटा सा शब्द clg लिखिए और Tab को प्रेस कीजिए, तो वह एक्सपैंड होकर console.log बन जाएगा। इसके लिए आपको नीचे दिया गया स्निपेट कोड लिखना होगा:

"Console Log": {
      "prefix": "clg",
      "body": [
          "console.log($1);"
      ],
      "description": "Console log with placeholder"
    }

स्निपेट कोड की व्याख्या:

ऊपर लिखे गए स्निपेट के कोड की व्याख्या कुछ इस प्रकार है:

• सबसे पहले, हम JSON सिंटैक्स का उपयोग करते हुए अपने स्निपेट को लिखते हैं।
• Key और Value दोनों को डबल कोट्स ("") के भीतर लिखते हैं।
• सबसे पहले, स्निपेट का एक अर्थपूर्ण नाम देते हैं, जैसे कि हमने "Console Log" लिखा है। यह एक अर्थपूर्ण नाम है जो बताता है कि यह log लिखने के लिए स्निपेट है।

body और prefix को समझना:

• हमें क्या करना होगा, इसकी व्याख्या उसके body के भीतर अर्थात कर्ली ब्रेसिज़ ({}) के भीतर है।
• body के भीतर हमें prefix कुंजी का जो वैल्यू ("clg") दिख रहा है, वह उन कीज़ के संयोग को बता रहा है जिसको लिखने के बाद Tab दबाने पर हमारा कोड log में एक्सपैंड हो जाएगा। ध्यान दीजिए कि prefix कीज़ के संयोग को बताता है जिसको लिखने के बाद Tab प्रेस करना है।
• body कुंजी के वैल्यू द्वारा उस एक्सपेंशन को दिया गया है जो Tab के दबाव के बाद बनेगा। body का वैल्यू एक एरे ([]) है, क्योंकि हम कई सारे स्टेटमेंट को एक स्निपेट के द्वारा लिख सकते हैं। उदाहरण के लिए, log(); लिखने के लिए हम वैल्यू के लिए console.log(); लिखेंगे।

$1, $2 और कर्सर पोजीशन: 📍

अब प्रश्न है कि Tab दबाने पर कर्सर की पोजीशन कहाँ होगी। इसके लिए $1 का उपयोग किया गया है।

• चूंकि $1 को () के भीतर लिखा गया है, अतः कर्सर पोजीशन () के भीतर होगा।
• नोट: बस आपको $1 का अर्थ समझना है बाकी जो आप एक्सपेंशन चाहते हैं वह सामान्य तरीके से लिखना है। $1 बताता है कि कीबोर्ड के Tab को प्रेस करने के बाद कीबोर्ड का कर्सर कहाँ पर पहुंचेगा।
• जैसा कि हमने log के पैरेंथेसिस के भीतर $1 लिखा है, इसका अर्थ यह है कि Tab प्रेस करने पर एक्सपेंशन के बाद पैरेंथेसिस के भीतर कर्सर ब्लिंक करेगा।

$2 के साथ दूसरी स्थिति:

अब हम एक दूसरी स्थिति को देखते हैं जो नीचे दिए गए परिवर्तित स्निपेट के कोड में $2 के साथ है:

"Console Log": {
      "prefix": "clg",
      "body": [
          "console.log($1);$2"
      ],
      "description": "Console log with placeholder"
    }

ऊपर के दिए गए स्निपेट में $2 का अर्थ यह है कि यदि यूजर दूसरी बार Tab को प्रेस करेगा, तो कर्सर कहाँ पर पहुंचेगा। जैसा कि ऊपर स्निपेट दिया गया है, उसमें $2 सेमीकॉलन के बाद है, इसका अर्थ है कि जब यूजर दूसरी बार Tab प्रेस करेगा तो सेमीकॉलन के बाद कर्सर ब्लिंक करेगा।

$1 के साथ सिंगल कोटेशन की तीसरी स्थिति:

अब हम तीसरी स्थिति को देखते हैं जो कि नीचे दिए गए स्निपेट में परिवर्तित कोड से स्पष्ट है:

"Console Log": {
      "prefix": "clg",
      "body": [
          "console.log('$1');$2"
      ],
      "description": "Console log with placeholder"
    }

इस बार हमने $1 को सिंगल कोटेशन ('') के भीतर लिखा है। इसका अर्थ यह है कि जब पहली बार Tab प्रेस होगा तो कर्सर जहाँ ब्लिंक करेगा उसके चारों ओर एक सिंगल कोटेशन बन जाएगा और जब यूजर टाइप करेगा तो सिंगल कोटेशन के भीतर टेक्स्ट अपीयर (Appear) होगा।

आशा है कि आपको यह छोटा सा टिप्स पसंद आया होगा और यह आपकी कोडिंग यात्रा में सहायक होगा! 😊